import React, { Component,useState } from 'react';
import BarEcharts from './components/BarEcharts'
import LineEcharts from './components/LineEcharts'
import PieEcharts from './components/PieEcharts'
import { Card } from 'antd';
import 'antd/dist/antd.css';

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      title:"线上存款户数总览图",
      xName:"机构",
      yName:"金额/万",
      xData:['广州分行', '深圳分行', '东莞分行', '重庆分行', '珠海分行', '江门分行', '湛江直属'],
      yData:[
        {
            name: "新增金额",
            type:'line',
            //区域填充样式
            areaStyle: {
                // color:'#0f0',
                opacity:0.3
            },
            data:[420, 1932, 801, 1934, 190, 1340, 1220],
        },
        {
            name: "赎回金额",
            type:'line',
            areaStyle: {
                // color:'#f00',
                opacity:0.3
            },
            data:[520, 932, 901, 1934, 1290, 1330, 1320]
        }
      ],
      activeTabKey1 : 'tab1'
    }
  }
  render(){
    const tabList = [
      {
        key: 'tab1',
        tab: '总览监控图',
      },
      {
        key: 'tab2',
        tab: '产品结构图',
      },
    ];
    const contentList = {
      tab1: <p>content1</p>,
      tab2: <p>content2</p>,
    };
    // const [activeTabKey1, setActiveTabKey1] = useState('tab1');
    const onTab1Change = key => {
      this.setState({
        activeTabKey1:key
      })
    };
    return (
      <>
        <Card
          style={{ width: '100%' }}
          tabList={tabList}
          activeTabKey={this.state.activeTabKey1}
          onTabChange={key => {
            onTab1Change(key);
          }}
        >
          {this.state.activeTabKey1==='tab1'?<BarEcharts {...this.state} />:<PieEcharts />}
        </Card>
        
    </>
    )
  }
}


